<template>
  <div class="space-usage-analysis">
    <a-row :gutter="[16, 16]">
      <a-col :sm="24" :md="16" :xl="18">
        <a-card>
          <a-flex justify="space-around" v-if="spaceUsageAnalyze">
            <a-card title="存储空间">
              <h2>
                {{ formatSize(spaceUsageAnalyze?.usedSize) }} /{{ formatSize(spaceUsageAnalyze?.maxSize) === '未知' ? '无限制' : formatSize(spaceUsageAnalyze?.maxSize) }}
              </h2>
              <a-progress
                type="circle"
                :percent="spaceUsageAnalyze?.sizeUsageRatio ?? 0"
                :width="200"
              />
            </a-card>
            <a-card title="图片数量">
              <h2>
                {{ spaceUsageAnalyze?.usedCount }} /{{ spaceUsageAnalyze?.maxCount ?? '无限制' }}
              </h2>
              <a-progress
                type="circle"
                :percent="spaceUsageAnalyze?.countUsageRatio ?? 0"
                :width="200"
              />
            </a-card>
          </a-flex>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getSpaceUsageAnalyzeUsingPost } from '@/api/spaceAnalysisController.ts'
import { formatSize } from '@/utils/index.ts'

interface Props {
  queryPublic?: boolean
  queryAll?: boolean
  spaceId?: number | string
}

const props = withDefaults(defineProps<Props>(), {
  queryPublic: false,
  queryAll: false,
})

// 获取使用情况
const spaceUsageAnalyze = ref<API.SpaceUsageAnalyzeResponse>()

const getSpaceUsageAnalyze = async () => {
  const res = await getSpaceUsageAnalyzeUsingPost({
    spaceId: props.spaceId as number,
    queryPublic: props.queryPublic,
    queryAll: props.queryAll,
  })
  if (res.data.code === 0 && res.data.data) {
    spaceUsageAnalyze.value = res.data.data
  }
}

onMounted(() => {
  getSpaceUsageAnalyze()
})
</script>

<style scoped lang="scss"></style>
